Design Guidelines for Selling Products with Multiple Variants多變體產品銷售設計指南

案例1：Best Buy 電視產品頁

問題描述：Best Buy 在電視產品頁中使用“系列選擇器”下拉選單來區分不同電視型號（如 CX、NanoCell 81）。每個系列的技術和功能差異較大，但頁面缺乏足夠資訊幫助使用者理解系列間的區別。

使用者反饋：一名參與者表示，選擇電視系列時需額外訪問第三方網站了解差異，並認為“BX”和“CX”等標籤無法傳遞有意義的資訊。

改進建議：對於複雜的變體（如電視系列），應為每個型號提供獨立的產品頁面，而非透過下拉選單呈現。

可以透過“相似產品”模組推薦其他系列，讓使用者在當前產品頁內輕鬆發現關聯產品。

案例2：Costco 電視產品頁

設計亮點：每個電視系列有獨立的產品頁面。相關係列透過“類似產品”模組展示，而非用下拉選單混為一體。

使用者體驗優勢：這種設計清晰區分了不同電視系列，使使用者能夠快速瞭解每個產品的特點，同時避免混淆其他型號的選項。

案例3：Arhaus Robin Wishbone 椅子

問題描述：相同款式的椅子因框架顏色和高度的不同被分為多個獨立產品頁。使用者在瀏覽頁面時，誤以為椅子只有一種顏色（Stone Vintage）和一種高度（Counter Stool）。

使用者體驗問題：使用者需要多次切換頁面尋找不同顏色和高度的變體，增加瀏覽和比較成本。

在產品詳情頁中，顏色標籤位置混亂，未明確展示所有顏色和高度選項。

改進建議：應將顏色和高度選項整合到單一產品頁面，透過顏色小樣和尺寸選擇器呈現。在產品列表頁中，使用清晰的顏色小樣和標籤提示不同變體。

案例4：Burton 兒童雪裝

設計亮點：在產品列表頁中，雪裝的多種顏色透過顏色小樣展示。進入產品詳情頁後，使用者可輕鬆瀏覽和選擇不同顏色的變體。

使用者體驗優勢：使用顏色小樣明確提示變體存在，避免使用者忽略可選項，同時減少使用者切換頁面的需求。

案例5：Crate and Barrel 傢俱

設計亮點：使用雙色小樣（如黑色框架和白色座椅的組合）展示傢俱的顏色和材質變體，直觀呈現多種選項。

適用場景：當顏色和材質的組合數量有限時，此設計能有效減少頁面複雜性，幫助使用者快速理解所有可用變體。

案例6：Coclico 鞋類產品

現狀描述：Coclico 為每種顏色的鞋建立了獨立產品頁，但每種顏色的頁面並未展示其他顏色的選項。

使用者體驗問題：使用者在瀏覽過程中需記住其他顏色的存在並返回尋找，增加導航成本。

改進建議：在產品頁面中直接展示其他顏色的縮圖，讓使用者在同一頁面切換顏色選項。即使產品目錄較小，仍需保證使用者能在詳情頁中發現所有變體。

案例7：Article 床架

設計亮點：產品詳情頁中提供顏色和尺寸選擇器，使用者可輕鬆切換檢視不同變體的效果圖。

使用者體驗優勢：在單一頁面展示所有變體，讓使用者無需切換頁面即可完成選項篩選，提高選擇效率。

綜合觀點與建議

關鍵問題

複雜變體展示不足：如 Best Buy 的電視系列使用下拉選單，資訊不足導致使用者需額外搜尋。

簡單變體過度分散：如 Arhaus 的椅子，因顏色和尺寸分為多個頁面，增加使用者負擔。

設計建議

• 複雜變體獨立列出：當變體間差異顯著影響產品功能和描述時，應為每個變體單獨建立頁面。

• 簡單變體整合管理：對於顏色、尺寸等簡單變體，使用單一頁面的屬性選擇器呈現。

• 列表頁中提示變體：透過顏色小樣或縮圖，讓使用者直觀理解產品選項。

• 詳情頁中集中變體選擇：在產品頁面展示所有變體，避免使用者返回列表頁尋找其他選項。

案例啟示

透過最佳化變體的展示方式，可以有效提升使用者體驗，減少使用者導航成本，進而提高電商轉化率。